<template>
  <div class="pie-box" :id="chartId"></div>
</template>
<script setup lang="ts">
/**
 * set:(配置项){
 **************legend:(){type:,top:,left:,right:,bottom:,}
 **************series:(){top:,left:,right:,bottom:,}
 * }
 * data:(图表数据)
 * xData:X轴数据
 * chartId:(表格ID:'String')
 * title:表格头部名称
 */
import echarts from "@/plugins/echarts.ts";
import {
  nextTick,
  onBeforeUnmount,
  onMounted,
  reactive,
  watch
} from "vue";
const _chartsData: any = reactive({
  data: [],
  series: []
});
let myChart: echarts = null
const colorList = ['#4673e9']
let option = {
  legend: {
    show: false,
    top: "auto",
    right: "0",
    itemGap: 10,
    itemWidth: 8,
    itemHeight: 8,
    pageButtonItemGap: 5,
    textStyle: {
      fontSize: 12,
      color: "#313233",
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: '#333',
    confine: true,
    textStyle: {
      color: '#fff',
      fontSize: '14',
      fontFamily: 'Microsoft YaHei',
    },
    formatter: function (params) {
      let value
      let name = params[0].name
      let divStr = ''
      params.forEach((item, index) => {
        divStr += '<div style="text-align:left;display: flex;justify-content: space-between;">' + '<div>' + item.marker + ' ' + item.seriesName + '</div>' + '<div style="margin-left:20px;">' + item.value + '</div>' + '</div>'
      })
      if (props.data[0][params[0].dataIndex]?.percent)
        divStr += divStr = '<div style="text-align:left;display: flex;justify-content: space-between;">' + '<div>' + ' ' + '</div>' + '<div style="margin-left:20px;">' + props.data[0][params[0].dataIndex].percent + '%</div>' + '</div>'
      return '<div style="text-align:center">' + '<span style="display: flex;justify-content: center ;color: #999;align-center:center;margin-bottom:16px" >' + name + '</span>'
        + divStr + '</div>';
    },
    className: 'echarts-tooltip-dark',
  },
  series: [
    {
      name: "IP",
      type: "bar",
      data: [],
      smooth: true,
      barGap: '-100%',
      color: "#4673e9",
      barWidth: 20
    }
  ],
  xAxis: {
    type: "category",
    data: [],
    nameGap: 22,
  },
  yAxis: {
    type: "value",
    nameLocation: "start",
    nameTextStyle: {
      color: "#2c3542",
      align: "right",
      verticalAlign: "top",
    },
    nameGap: 22,
  },
};

const props = defineProps({
  set: {
    type: Array,
    default: () => {
      return [];
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  series: {
    type: Array<any>,
    default: () => [],
  },
  chartId: { type: String, default: "" },
  title: { type: String, default: "" },
}
)
const echartsResize = () => {
  myChart?.resize()
}
//生命周期
onMounted(() => {

  nextTick(() => {
    myChart = echarts.getInstanceByDom(document.querySelector('#' + props.chartId));
    myChart = echarts.init(document.getElementById(props.chartId));
    myChart.resize()
  })
  window.addEventListener("resize", echartsResize, false);
})
onBeforeUnmount(() => {
  myChart.dispose()
  window.removeEventListener("resize", echartsResize, false);
});
watch(
  () => props,
  () => {
    nextTick(() => {
      _chartsData.data = props.data;
      if (props.series.length === 1) {
        option.series[0].name = props.series[0].title
        option.series[0].data = props.data?.map(item => item.value)
        option.xAxis.data = props.data?.map(item => item.title)
        option.series[0].color = props.series[0].color || [0]
      } else {
        let maxIndex = null
        props.series.forEach((item, index) => {
          option.xAxis.data = props.data?.map(item => item.title)
          maxIndex = maxIndex === null || props.data[index]?.length > props.data[maxIndex].length ? index : maxIndex
          option.series[index] = {
            ...option.series[index],
            name: item.title,
            type: "bar",
            barWidth: 16,
            data: props.data[index]?.map(item => item.value),
            smooth: true,
            color: item.color || colorList[index],
          }
        });
        option.xAxis.data = props.data[maxIndex]?.map(item => item.title)
      }
      myChart.setOption(option);
    })

  }, { deep: true, immediate: true }
);


</script>
<style lang="scss" scoped>
.pie-box {
  width: 100%;
  height: 100%;
}
</style>
